<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<script src="js/mui.js"></script>
		<script src="js/vue.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			html,
			body {
				background-color: white;
			}
			
			.wrap-search {
				margin: 15px;
				background: #E6E6E6;
				height: 30px;
				border-radius: 5px;
				text-align: center;
			}
			
			* {
				touch-action: none;
			}
			
			.item-img {
				width: 60px;
				height: 90px;
				margin-right: 10px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" style="background: white;">
			<!--搜索框-->
			<div class="wrap-search">
				<span class="mui-icon mui-icon-search" style="line-height: 30px; color: #AAAAAA;font-size: 16px;"></span>
				<span style="line-height: 30px; color: #AAAAAA;font-size: 14px;">电影/电视剧/影人</span>
			</div>
			<!--列表-->
			<div id="refreshContainer" class="mui-scroll-wrapper" style="top: 50px; bottom: 45px;">
				<div class="mui-scroll">
					<ul id="movies" class="mui-table-view">
						<li class="mui-table-view-cell" v-for="item in movies" @tap = "open_detail(item)">
							<!--图片-->
							<img class="item-img mui-pull-left" :src="item.cover" />
							<!--标题-->
							<div class="mui-ellipsis dark-big">
								{{item.title}}
							</div>

							<!--风格-->
							<div class="mui-ellipsis">
								<span class="gray-small">{{item.genres}}</span>&nbsp;
								<!--评分-->
								<span v-if="item.score > 0" class="orange-small">{{item.score}}分</span>
								<span v-else class="orange-small">暂无评分</span>
							</div>

							<!--导演-->
							<div class="mui-ellipsis">
								<!--单行显示-->
								<div class="mui-ellipsis gray-small">导演:{{item.directors}}</div>
								<div class="mui-ellipsis gray-small">主演:{{item.casts}}</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<script src="js/util.js"></script>
		<script type="text/javascript">
			var data_movies = new Vue({
				el: '#movies',
				data: {
					movies: []
				}
			});

			(function() {
				mui.init({
					swipeBack: true, //启用右滑关闭功能
					pullRefresh: {
						container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
						down: {
							height: 50, //可选,默认50.触发下拉刷新拖动距离,
							auto: true, //可选,默认false.首次加载自动下拉刷新一次
							contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
							contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
							contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
							callback: refreshData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
						},
						up: {
							height: 50, //可选.默认50.触发上拉加载拖动距离
							auto: true, //可选,默认false.自动上拉加载一次
							contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
							contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
							callback: loadMoreData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
						}
					}
				});

				//刷新数据，重新调用接口
				function refreshData() {
					//初始化scroll
					console.log('haha');
					//请求热映接口
					mui.getJSON('https://api.douban.com/v2/movie/in_theaters', {
						start: 0,
						count: 10
					}, function(resp) {
						data_movies.movies.splice(0, data_movies.movies.length); 
						//						console.log(resp.count);
						//调用数据转换
						data_movies.movies = data_movies.movies.concat(convert(resp.subjects));
						//				console.log(newMovies.length);
						mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
						mui('#refreshContainer').pullRefresh().refresh(true);
					});
				}

				//请求更多的数据
				function loadMoreData() {
					//请求热映接口
					mui.getJSON('https://api.douban.com/v2/movie/in_theaters', {
						start: data_movies.movies.length,
						count: 10
					}, function(resp) {
						//调用数据转换
						data_movies.movies = data_movies.movies.concat(convert(resp.subjects));
						//				console.log(newMovies.length);
						mui('#refreshContainer').pullRefresh().endPullupToRefresh(data_movies.movies.length > resp.total);
					});
				}

				mui.plusReady(function() {
					var self = plus.webview.currentWebview();

					// 创建子webview窗口 并初始化
					var aniShow = {};
					util.initSubpage(aniShow);

					var nview = plus.nativeObj.View.getViewById('tabBar'),
						activePage = plus.webview.currentWebview(),
						targetPage,
						subpages = util.options.subpages,
						pageW = window.innerWidth,
						currIndex = 0;

					/**
					 * 根据判断view控件点击位置判断切换的tab
					 */
					nview.addEventListener('click', function(e) {
						var clientX = e.clientX;
						if(clientX > 0 && clientX <= parseInt(pageW * 0.25)) {
							currIndex = 0;
						} else if(clientX > parseInt(pageW * 0.25) && clientX <= parseInt(pageW * 0.67)) {
							currIndex = 1;
						} else if(clientX > parseInt(pageW * 0.67) && clientX <= parseInt(pageW * 0.99)) {
							currIndex = 2;
						}
						// 匹配对应tab窗口	
						if(currIndex > 0) {
							targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
						} else {
							targetPage = plus.webview.currentWebview();
						}

						if(targetPage == activePage) {
							return;
						}

						if(currIndex !== 3) {
							//底部选项卡切换
							util.toggleNview(currIndex);
							// 子页面切换
							util.changeSubpage(targetPage, activePage, aniShow);
							//更新当前活跃的页面
							activePage = targetPage;
						}
					});
				});
			})();
			
			
			

			//			搜索框添加点击事件
			mui('.wrap-search')[0].addEventListener('tap', function() {
				console.log('click....');
			});
			
			//预加载页面
			var page = mui.preload({
				id:'movie-detail',
				url:'./html/movie-detail.html'
			});
			
			
			//点击每一行的事件,打开电影详情
			function open_detail(item){
				//触发详情页面的movieid事件
				mui.fire(page,'movieId',{
					id:item.id
				});
				
				//打开
				mui.openWindow({
					id:'movie-detail'
				});
			}
			

			//初始化scroll
			mui('.mui-scroll-wrapper').scroll({
				//隐藏掉一个滑动指示器
				indicators:false
			});

			//			//请求热映接口
			//			mui.getJSON('https://api.douban.com/v2/movie/in_theaters', {
			//
			//			}, function(resp) {
			//				//						data_movies.movies.splice(0,data_movies.movies.length);
			//				//						console.log(resp.count);
			//				//调用数据转换
			//				data_movies.movies = convert(resp.subjects)
			//				//				console.log(newMovies.length);
			//				//						mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
			//				//						mui('#refreshContainer').pullRefresh().refresh(true);
			//
			//			});

			//数据转换
			function convert(items) {
				var newItems = [];

				//遍历
				items.forEach(function(item) {
					var genres = item.genres.toString().replace(/,/g, ' / ');

					//导演
					var directors = '';
					for(var i = 0; i < item.directors.length; i++) {
						directors += item.directors[i].name;
						if(i != item.directors.length - 1) {
							directors += ' / ';
						}
					}

					//演员
					var casts = '';
					for(var i = 0; i < item.casts.length; i++) {
						casts += item.casts[i].name;
						if(i != item.casts.length - 1) {
							casts += ' / ';
						}
					}

					//放入值
					newItems.push({
						id: item.id,
						title: item.title,
						genres: genres,
						cover: item.images.large,
						score: item.rating.average,
						directors: directors,
						casts: casts
					});
				});

				return newItems;
			}
		</script>
	</body>

</html>